export const renderer = (vNode, container) => {
    const el = document.createElement(vNode.tag);

    for (const propsKey in vNode.props) {
        // on开头说明是事件 就比如onclick onblur之类的
        if (/^on/.test(propsKey)) {
            el.addEventListener(propsKey.substring(2).toLowerCase(), vNode.props[propsKey])
        } else {
            el.setAttribute(propsKey, vNode.props[propsKey]);
        }
    }

    // 判断是不是有下级
    if (typeof vNode.children === 'string') {
        el.appendChild(document.createTextNode(vNode.children));
    } else if (Array.isArray(vNode.children)) {
        vNode.children.forEach(vNodeChild => {
            renderer(vNodeChild, el);
        });
    }

    container.appendChild(el);
}